import GPS from '@/utils/gps'
import EventEmitter from '@/utils/eventEmitter'

export default class AnimateMarker extends EventEmitter {
  constructor(map, list) {
    super()
    this.map = map;
    // this.dataList = JSON.parse(JSON.stringify(list)); // 源数据

    this.dataList = list.sort((a, b) => (+new Date(a.gmtReport)) - (+new Date(b.gmtReport)))
    this.passedPolyline = null
    this.oldPolyline = null
    this.moveMarker = null
    this.duration = 300
    this.offset = [-10, -10]
    // this.setOldPolyline(this.dataList)
    this._init(this.dataList)
  }

  pathList = []  // 坐标数据
  newDataList = []  // 源数据备份使用
  _init (list) {
    this.newDataList = JSON.parse(JSON.stringify(list))
    this.pathList = list.map(item => GPS.WGS84toGCJ02(item.longitude, item.latitude))
    this._initMapMarker()
  }

  _initMapMarker () {
    this.passedPolyline = new AMap.Polyline({
      map: this.map,
      strokeColor: '#28F',
      strokeWeight: 6,
      strokeOpacity: 1,
      zIndex: 130,
    })

    this.moveMarker = new AMap.Marker({
      map: this.map,
      icon: new AMap.Icon({
        image: require('@/assets/images/icon-location.png'),
        size: [20, 20],
        imageSize: [20, 20]
      }),
      offset: this.offset || [-15, -15],
      position: this.pathList[0],
      zIndex: 150
    })
    this.setLabel(this.newDataList[0].gmtReport)
  }

  setOldPolyline(oldDataList) {
    if(this.oldPolyline) {
      this.map.remove(this.oldPolyline)
      this.oldPolyline = null
    }
    const _pathList = oldDataList.map(item => GPS.WGS84toGCJ02(item.longitude, item.latitude))
    this.oldPolyline = new AMap.Polyline({
      map: this.map,
      path: _pathList,
      strokeColor: '#0f0',
      strokeWeight: 6,
      strokeOpacity: 0.6,
      zIndex: 130,
    })
  }

  // 重新设置播放位置
  setPlayPos(timestamp) {
    const oldDataList = []
    const newDataList = this.dataList.filter(item => {
			item._timestamp = +new Date(item.gmtReport)
			const _timestamp = +new Date(item.gmtReport)
			if(_timestamp > timestamp) {
				return item
			}else{
        oldDataList.push(item)
      }
		})


    this.setOldPolyline(oldDataList)
    // const dataSort = newDataList.sort((a, b) => a._timestamp - b._timestamp)
    // console.log(dataSort)

    if(this.moveMarker) {
			this.moveMarker.off("movealong")
			this.moveMarker.off("moving")
			this.map.remove(this.moveMarker)
			this.moveMarker = null
		}
		if(this.passedPolyline) {
			this.map.remove(this.passedPolyline)
			this.passedPolyline = null
		}

		// if(this.showMarkerInfoList.length>0) {
		// 	this.map.remove(this.showMarkerInfoList)
		// 	this.showMarkerInfoList = []
		// }

		if(newDataList.length>0) {
			this._init(newDataList)
		}
  }

  play () {
    if(this.pathList.length < 2) {
      return;
    }

    this.moveMarker.moveAlong(this.pathList, {
      duration: this.duration,
      autoRotation: false,
    });

    this.moveMarker.on("movealong", e => {
      this.emit("playEnd")
    })

    // this.moveMarker.on("moveend", e => {
    //   this.addInfoMarker(e.index)
    // })

    this.moveMarker.on("moving", e => {
      this.passedPolyline.setPath(e.passedPath);
      const time = this.newDataList[e.passedPath.length - 1].gmtReport
      this.emit("updateTime", { clocks: +new Date(time), g_day: time })
      this.setLabel(time)
    })
  }

  setLabel (time) {
    this.moveMarker.setLabel({
      direction: 'top',
      content: `
        <div class="cmap-marker-label">
          <div class='map-marker-label'>
            <div class='item'>
              <span class='item-label'>时间：</span>
              <span class='item-value'>${time}</span>
            </div>
          </div>
          </div>
        `,
    });
  }

  destroy () {
    if (this.moveMarker) {
      this.moveMarker.off("movealong")
      this.moveMarker.off("moving")
      this.stop()
      this.map.remove(this.moveMarker)
      this.moveMarker = null
    }
    this.passedPolyline && this.map.remove(this.passedPolyline)
    this.passedPolyline = null
    this.pathList = []
    this.dataList.length = 0
    this.newDataList.length = 0
    if(this.oldPolyline) {
      this.map.remove(this.oldPolyline)
      this.oldPolyline = null
    }
  }

  stop () {
    this.moveMarker.stopMove()
  }
}
